<%@ page pageEncoding="UTF-8"%>
<%@ include file="../commons/head.jsp"%>
<title>JS的AJAX</title>
<style>
table, tr, td {
        		border: 1px solid #000;
        		border-collapse: collapse;
        	}
        	table {
        		width: 400px;
        	}
        	td {
        		height: 25px;
        	}
</style>
</head>
<body>
<div>
	<div>
		<table>
			<thead>
				<tr>
					<th>id</th>
					<th>账户</th>
					<th>用户姓名</th>
					<th>isValid</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
	</div>
	<div>
		<button onclick="findList();">获得所有用户</button><br />
		userName:<input type="text" id="SQL-userName">
		<button onclick="addData();">增加此用户</button><br />
		<button onclick="updateData();">修改id为135的用户的姓名为abc：</button><br />
		<button onclick="deleteData();">删除id为135的用户：</button>
	</div>
</div>
<script type="text/javascript">
function findList(){
	$.ajax({
		url:"${pageContext.request.contextPath}/huangyan/list",
		contentType: "application/json; charset=utf-8",
		method:'',
		data:{"isValid":1},
		dataType:'json',
		complate:  function(XMLHttpRequest){
			alert("准备就绪");
		},
		success:function(data){debugger
			//var list = data.rows;
    		
			for(var i=0;i<data.length;i++){
				var newtr=document.createElement("tr");
	    		
	    		var td1=document.createElement("td");
	    		td1.innerText=data[i].id;
	    		var td2=document.createElement("td");
	    		td2.innerText=data[i].userAccount;
	    		var td3=document.createElement("td");
	    		td3.innerText=data[i].userName;
	    		var td4=document.createElement("td");
	    		td4.innerText=data[i].validFlag;
	    		newtr.appendChild(td1);
	    		newtr.appendChild(td2);
	    		newtr.appendChild(td3);
	    		newtr.appendChild(td4);
	    		
	    		var tb=document.getElementsByTagName("tbody").item(0);
	    		tb.insertBefore(newtr,tb.firstElementChild);
	    		
	    		$("#getUser").attr("disabled",true)
			} 
		},
		error:function(XMLHttpRequest, textStatus, errorThrown){
			alert("出错了");
		}
	});
}


function addData(){debugger
	var name = $("#SQL-userName").val();
	 $.ajax({
		url:"${pageContext.request.contextPath}/huangyan/save",
		contentType: "application/json; charset=utf-8",
		method:'',
		data:{"userName":name,"isValid":1},
		dataType:'json',
		success:function(data){
			if(data.result == 1){
				alert("添加成功");
			}
		}
	}); 
}
function updateData(){
	var id = 135;
	var name = "abc";
	 $.ajax({
		url:"${pageContext.request.contextPath}/huangyan/update",
		contentType: "application/json; charset=utf-8",
		method:'',
		data:{"id":id,"userName":name},
		dataType:'json',
		success:function(data){
			if(data.result == 1){
				
				alert("更新成功");
				findList();
			}
		},
		error:function(XMLHttpRequest, textStatus, errorThrown){
			alert("用户可能不存在");
		}
	}); 
	
}
function deleteData(){
	 $.ajax({
		url:"${pageContext.request.contextPath}/huangyan/delete",
		contentType: "application/json; charset=utf-8",
		method:'',
		data:{"id":135},
		dataType:'json',
		success:function(data){
			if(data.result == 1){
				alert("删除成功");
			}
		}
	}); 
	
}
</script>
</body>
</html>